<template>
  <div class="app-container">
    <div v-if="whichDomShow==='list'">
      <el-row class="searchDom">
        <el-col style="width: 80px">
          {{ $t('roles.roleName') }}
        </el-col>
        <el-col :span="5">
          <el-input v-model="roleName" />
        </el-col>
        <el-col :span="4" :offset="1"><el-button type="primary" plain @click="handleSearchBtn">{{ $t('roles.search') }}</el-button></el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="margin-bottom: 30px"><el-button type="primary" plain>{{ $t('roles.addRole') }}</el-button></el-col>
      </el-row>
      <tab-pane ref="relationDom" :list-query="listQuery" :table-label="tableLabel" :table-data="tableData" />
    </div>
    <div v-else-if="whichDomShow==='add'">
      <el-button type="primary" plain>{{ $t('roles.returnRole') }}</el-button>
      <el-button type="primary" style="margin-left: 30px">{{ $t('roles.save') }}</el-button>
      <el-form label-width="80px">
        <h4>{{ $t('roles.roleInfo') }}</h4>
        <el-form-item label="角色名称">
          <el-input />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input />
        </el-form-item>
        <el-form-item label="角色参考">
          <el-input />
        </el-form-item>
        <h4>{{ $t('roles.rolePermission') }}</h4>
        <el-form-item>
          <el-tree
            :props="props"
            :load="loadNode"
            lazy
            show-checkbox
            @check-change="handleChangeNode"
          />
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import TabPane from '@/views/tab/components/TabPane'
import { getRolesList } from '@/api/role'
export default {
  name: 'Role',
  components: {
    TabPane
  },
  data() {
    return {
      tableLabel: [
        {
          label: this.$t('roles.roleName'),
          key: 'roleName'
        },
        {
          label: this.$t('roles.roleDesc'),
          key: 'roleDesc'
        },
        {
          label: this.$t('roles.staffNumber'),
          key: 'staffNum'
        },
        {
          label: this.$t('roles.opration'),
          key: 'opration',
          type: 'role'
        }
      ],
      tableData: [
        {
          roleName: '测试',
          roleDesc: '描述',
          staffNum: '员工数量'
        }
      ],
      whichDomShow: 'list',
      roleName: '',
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      listQuery: {
        total: 0,
        limit: 20,
        page: 1
      }
    }
  },
  mounted() {
    this.getRolesListData()
  },
  methods: {
    // role list
    getRolesListData() {
      var obj = {
        name: this.roleName,
        pageNo: this.listQuery.page - 1,
        pageSize: this.listQuery.limit
      }
      getRolesList(obj).then(res => {
        console.log('觉得', res)
      })
    },
    // search
    handleSearchBtn() {
      this.getRolesListData()
    },
    // tree
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: 'region' }])
      }
      if (node.level > 1) return resolve([])

      setTimeout(() => {
        const data = [{
          name: 'leaf',
          leaf: true
        }, {
          name: 'zone'
        }]

        resolve(data)
      }, 500)
    },
    handleChangeNode(item, key, data) {
      console.log(item, key, data)
    }
  }
}
</script>

<style>
.searchDom {
  height: 50px;
  line-height: 50px;
  margin-bottom: 30px
}
</style>
